<app-notification />
<ng-container *ngIf="notFound()">
  <app-missing [args]="notFound()" />
</ng-container>
<div
  class="mx-auto max-w-screen-xl py-8 2xl:max-w-screen-2xl"
  *ngIf="!notFound()"
  [hidden]="!data.batch">
  <main class="wsl-min-h-screen-2 container mx-auto space-y-4 px-4 xl:px-8">
    <div class="wsl-page-head wsl-box">
      <nav aria-label="breadcrumb">
        <ol>
          <li>
            <a routerLink="../..">{{ data.batch?.teamName }}</a>
          </li>
          <li>
            <a routerLink="..">{{ data.batch?.suiteName }}</a>
          </li>
          <li class="active" aria-current="page">
            <span>{{ data.batch?.batchSlug.split('@')[0] }}</span>
          </li>
        </ol>
      </nav>
      <div class="flex space-x-2 whitespace-nowrap print:hidden">
        <button
          class="wsl-btn-sm wsl-btn-primary"
          *ngFor="let button of data.buttons"
          type="button"
          (click)="button.click()"
          [title]="button.title">
          {{ button.text }}
        </button>
        <div *ngIf="data.subButtons.length !== 0" wslDropdown>
          <button
            class="wsl-dropdown-toggle wsl-btn-sm wsl-btn-muted wsl-text-muted flex h-full items-center"
            id="wsl-batch-settings"
            aria-haspopup="true"
            aria-expanded="false">
            <ng-icon name="featherSettings" size="1.05rem" />
          </button>
          <ul
            class="wsl-dropdown-menu hidden w-48"
            aria-labelledby="wsl-batch-settings">
            <li
              *ngFor="let button of data.subButtons"
              class="wsl-dropdown-item flex items-center space-x-2"
              (click)="button.click()"
              [title]="button.title">
              <ng-icon class="wsl-text-muted" [name]="button.icon" />
              <span class="text-sm">{{ button.text }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <nav>
      <ul class="flex space-x-4">
        <ng-container *ngFor="let tab of data.tabs">
          <li
            class="wsl-page-nav-item"
            *ngIf="tab.shown"
            (click)="switchTab(tab.type)"
            [ngClass]="{ 'wsl-tab-active': tab.type === data.tab }">
            <ng-icon [name]="tab.icon" size="1.25rem" />
            <p>{{ tab.name }}</p>
            <span *ngIf="tab.counter">{{ tab.counter }}</span>
          </li>
        </ng-container>
      </ul>
    </nav>
    <div
      *ngIf="data.overview"
      [hidden]="data.tab !== 'elements' || !hasData() || !hasItems()">
      <app-home-page-overview [inputs]="data.overview" />
    </div>
    <div
      class="wsl-box sticky top-16 z-10"
      *ngIf="data.suite && data.params"
      [hidden]="data.tab !== 'elements'">
      <app-home-version-navigator [suite]="data.suite" [params]="data.params" />
    </div>
    <div
      class="wsl-min-h-screen-4 grid place-content-center"
      *ngIf="data.tab === 'elements' && (!hasData() || !hasItems())">
      <app-spinner />
    </div>
    <div [hidden]="data.tab !== 'elements' || !hasData() || !hasItems()">
      <app-batch-list-elements />
    </div>
    <div [hidden]="data.tab !== 'elements' || !hasData() || !hasItems()">
      <app-batch-tab-comments />
    </div>
  </main>
</div>
